<template>
  <div class="app-container">

    <div class="head-container">
      <el-card shadow="never">
        <div class="search-bar">
          <!-- 搜索 -->
          <el-form
            :inline="true"
            :model="searchModel"
            size="mini"
            class="demo-form-inline"
          >
            <el-form-item label="角色">
              <el-input
                v-model="searchModel.name"
                placeholder="请输入角色"
              ></el-input>
            </el-form-item>

            <el-form-item class="operations">
              <el-button
                type="primary"
                @click="search"
              >查询</el-button>
              <el-button
                type="default"
                @click="reset"
              >重置</el-button>
              <el-button
                type="danger"
                @click="createRole"
                v-if="checkPermission(['ADMIN', 'role::add'])"
              >创建角色</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

    </div>

    <el-card shadow="never">
      <div class="data-list-wrap">
        <el-table
          v-loading="loading"
          :data="list"
          size="small"
          style="width: 100%;"
        >
          <el-table-column
            prop="name"
            label="角色"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="checkPermission(['ADMIN', 'menu::save-role-menu'])"
                type="text"
                @click="configMenu(scope.row)"
              >配置菜单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchModel.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchModel.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchModel.count"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="创建角色"
      class="dialog-action"
      width="30%"
      :visible.sync="createRoleDialog"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        size="mini"
      >
        <el-form-item
          label="角色："
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入角色"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="备注："
          prop="remark"
        >
          <el-input
            v-model="form.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="createRoleDialog = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="opLoading"
          @click="doCreateRole"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 配置菜单 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="配置菜单"
      class="dialog-action"
      width="50%"
      :visible.sync="configMenuDialog"
    >
      <el-form
        :model="menuForm"
        ref="menuForm"
        size="mini"
        v-loading="dialogLoading"
      >
        <el-form-item
          label="角色："
          prop="name"
        >
          <div>{{ menuForm.name }}</div>
        </el-form-item>

        <el-tree
          ref="menu"
          check-strictly
          default-expand-all
          :data="menus"
          :props="defaultProps"
          show-checkbox
          node-key="id"
        />

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="configMenuDialog= false">取 消</el-button>
        <el-button
          type="primary"
          :loading="opLoading"
          @click="doConfigMenu"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { searchRole, createRole } from "@/api/business";
import { getMenusTree, getMenuIds, saveRoleMenu } from "@/api/menu.js";
import checkPermission from "@/utils/permission";
const defaultModel = {
  name: null,
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      menus: [],
      menuForm: {},
      configMenuDialog: false,

      permissionS: [],
      permissionForm: {},
      configPermissionDialog: false,

      form: {},
      createRoleDialog: false,
      list: [],
      loading: false,
      opLoading: false,
      dialogLoading: false,
      searchModel: _.cloneDeep(defaultModel),

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
    };
  },
  components: {},
  methods: {
    checkPermission,

    configPermission(row) {
      this.dialogLoading = true;
      this.configPermissionDialog = true;
      //搜索这个角色的权限ids
      this.permissionForm = _.cloneDeep(row);
    },

    configMenu(row) {
      this.dialogLoading = true;
      this.configMenuDialog = true;
      this.menuForm = _.cloneDeep(row);

      //搜索这个角色的菜单ids
      getMenuIds({ roleId: row.id }).then((data) => {
        if (data.success) {
          this.$refs.menu.setCheckedKeys(data.data);
        }
        this.dialogLoading = false;
      });
    },

    doConfigMenu() {
      this.opLoading = true;
      let form = {
        roleId: this.menuForm.id,
        menuIds: [],
      };
      //选中的
      this.$refs.menu.getCheckedKeys().forEach(function (data, index) {
        form.menuIds.push(data);
      });

      //半选的
      this.$refs.menu.getHalfCheckedKeys().forEach(function (data, index) {
        form.menuIds.push(data);
      });

      saveRoleMenu(form).then((data) => {
        if (data.success) {
          this.$notify({
            title: "配置成功",
            type: "success",
            duration: 2500,
          });
          this.configMenuDialog = false;
        }
        this.opLoading = false;
      });
    },

    createRole() {
      this.createRoleDialog = true;
    },

    doCreateRole() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.opLoading = true;
          createRole(this.form)
            .then((data) => {
              if (data.success) {
                this.$notify({
                  title: "创建成功",
                  type: "success",
                  duration: 2500,
                });
                this.createRoleDialog = false;
                this.search();
              }
              this.opLoading = false;
            })
            .catch((err) => {
              console.log(err);
              this.opLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    search() {
      this.getList(1);
    },

    getList(pageNo) {
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }

      let searchModel = _.cloneDeep(this.searchModel);
      searchRole(this.compileSearchModel(searchModel))
        .then((data) => {
          this.searchModel.pageNo = ++data.pageNo;
          this.searchModel.count = data.count;
          this.searchModel.pageSize = data.pageSize;
          this.list = data.data;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err.response.data.message);
        });
    },

    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },

    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;

      return searchModel;
    },
    //修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    //修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.getMenus();
      this.getList(1);
    },
    getMenus() {
      getMenusTree().then((res) => {
        this.menus = res.data;
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
</style>
